<template>
  <div class="flex justify-between text-[#e54c5f]">
    <div class="flex items-center cursor-pointer" @click="handleClick">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <span class="pl-5">{{ $t('银行卡管理') }}</span>
    </div>
    <div>

      <!-- 客户管理添加银行卡 -->
      <el-button size="large" type="primary" :icon="Plus"
        @click="handleClickCreate({ type: 'add' })">{{ $t('添加银行卡') }}</el-button>
    </div>
  </div>
  <div class="my-5">
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="flex flex-col w-80 items-center" v-if="!cardsList.length">
        <el-card class="w-80 h-52 mb-5" :body-style="{ padding: 0, height: '100%' }">
          <div class="h-full flex flex-col items-center justify-center" @click="handleClickCreate({ type: 'add' })">
            <el-icon size="40">
              <Plus />
            </el-icon>
            <p class="mt-3 el-color-info-dark-2">{{ $t('您需要添加一张提现银行卡') }}</p>
          </div>
        </el-card>
      </div>
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in cardsList" :key="index">
          <div class="flex flex-col w-full">
            <el-card class="w-full my-5 text-sm">
              <div class="h-full flex flex-col justify-center">
                <p class="flex justify-around mb-4">
                  <span class="flex w-1/3 text-left"><!--{{ $t("类型") }}--></span>
                    <span class="flex-1 md:w-2/3 text-right"><el-tag :type="item.card_type == 1 ? 'success' : 'warning'">{{ item.card_type_name }}</el-tag></span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("账户名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.name }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行国家/地区") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.bank_country }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.bank_name }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行地址") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.bank_address }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行账号") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.card_number }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("收款人名称") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.card_name }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("SWIFT/BIC") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.swift_code }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("币种") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.currency }}</span>
                </p>
                <p class="flex justify-around mb-2">
                  <span class="flex w-1/3 text-left">{{ $t("银行补充信息") }}</span>
                  <span class="flex-1 md:w-2/3 text-right">{{ item.extended }}</span>
                </p>
              </div>
            </el-card>
            <div class="flex justify-around">
              <el-button type="danger" :icon="Delete" class="w-24" @click="handleDel({ ...item, type: 'del' })">{{ $t('删除') }}</el-button>
              <el-button type="warning" :icon="Edit" class="w-24" @click="handleClickCreate({ ...item, type: 'edit' })">{{ $t('编辑') }}</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-skeleton>
  </div>
  <PaymentMethodForm @closeDialog="closeDialog" @submitForm="dialogSubmit" :dialogVisible="dialogVisible"
    :form="dialogForm" :currencyList="currencyList" />
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "vue";
import {
  bankListApi,
  bankAddApi,
  bankUpdateApi,
  bankDeleteApi,
  customerKycNameApi,
  PayCurrencyApi
} from "@/api/account/index";
import { ElMessageBox, ElMessage } from "element-plus";
import { Edit, Plus, Delete } from '@element-plus/icons-vue'
import PaymentMethodForm from "./paymentMethodForm.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(false);
const dialogVisible = ref(false);
const router = useRouter();
const route = useRoute();
const cardsList = ref([]);
const currencyList = ref([]); //币种
const dialogFormData = {
  card_type: "",
  name: "",
  card_name: "",
  card_number: "",
  bank_name: "",
  bank_address: "",
  bank_country: "",
  swift_code: "",
  payee_address: "",
  currency: "",
  extended: "",
  phone: "",
  email: "",
  kyc: {}
};
const dialogForm = reactive({ ...dialogFormData });
// console.log(route);
// 获取绑卡列表
const getCardsData = async () => {
  try {
    loading.value = true;
    const res = await bankListApi({ id: route.query.id });
    if (res.length) {
      cardsList.value = res;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 删除
const handleDel = (item) => {
  ElMessageBox.confirm(t("您是否确认删除?"), t("温馨提示"), {
    type: "warning",
  })
    .then(async () => {
      const res = await bankDeleteApi({ bank_id: item.id });

      ElMessage({
        message: t('删除成功'),
        type: "success",
      });
      getCardsData();
    })
    .catch(() => { });
};

// 提交
const dialogSubmit = async (param) => {
  try {
    if (param.type == "add") {
      const res = await bankAddApi({ ...param, kyc_id: route.query.id });
      ElMessage({
        showClose: true,
        message: t('添加成功'),
        type: "success",
      });
    }
    if (param.type == "edit") {
      const res = await bankUpdateApi({ ...param, bank_id: param.id });
      ElMessage({
        showClose: true,
        message: t('编辑成功'),
        type: "success",
      });
    }

    dialogVisible.value = false;
    getCardsData();
  } catch (error) {
    dialogVisible.value = false;
  }
};
// 打开窗口
const handleClickCreate = async (data) => {
  try {
    dialogVisible.value = true;
    Object.assign(dialogForm, data);
    const res = await customerKycNameApi({"id": route.query.id});
    Object.assign(dialogForm.kyc, res);
    const res_c = await PayCurrencyApi();
    if (res_c.length) {
      currencyList.value = res_c.map((item) => {
        return { value: item, label: item };
      });
    };
  } catch (error) {}
};
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false;
  delete dialogForm.id;
  Object.assign(dialogForm, dialogFormData);
};

const handleClick = () => {
  router.replace(`/account/customer`);
};
getCardsData();
</script>
